<template>
  <div class="bigBox">
    <!-- 最外层的大盒子 -->
    <div class="box">
      <!-- 滑动盒子 -->
      <div class="pre-box" :style="preRef">
        <h1>WELCOME</h1>
        <p>JOIN US!</p>
        <div class="img-box">
          <img :src="img" alt="">
        </div>
      </div>
      <!-- 注册盒子 -->
      <div class="register-form">
        <!-- 标题盒子 -->
        <div class="title-box1">
          <h1>人脸识别</h1>
        </div>

        <!-- 输入框盒子 -->
        <div class="headImg">
          <video id="video2" width="300px" height="300px" style="" autoplay="autoplay" />
          <canvas id="canvas2" width="500px" height="500px" style="display: none" />
        </div>

        <!-- 按钮盒子 -->
        <div class="btn-box">
          <button @click="chooseFileChangeComp">采集</button>
          <!-- 绑定点击事件 -->
          <p @click="mySwitch()">账号登录</p>
        </div>
      </div>
      <!-- 登录盒子 -->
      <div class="login-form">
        <!-- 标题盒子 -->
        <div class="title-box">
          <h1>登录</h1>
        </div>
        <!-- 输入框盒子 -->
        <div class="input-box">
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
        </div>
        <!-- 按钮盒子 -->
        <div class="btn-box">
          <button>登录</button>
          <!-- 绑定点击事件 -->
          <p @click="mySwitch()">人脸识别</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import waoku from '@/assets/img/waoku.jpg'
import wuwu from '@/assets/img/wuwu.jpeg'

export default {
  name: 'Login',
  data() {
    return {
      background: ['#c9e0ed', '#edd4dc'],
      img: waoku,
      preRef: {
        backgroundColor: '#edd4dc',
        transform: 'translateX(0%)'
      }
    }
  },
  created() {

  },
  methods: {
    mySwitch() {
      // eslint-disable-next-line eqeqeq
      this.img = this.img == waoku ? wuwu : waoku
      const preRef = this.preRef
      // eslint-disable-next-line eqeqeq
      preRef.transform = preRef.transform == 'translateX(0%)' ? 'translateX(100%)' : 'translateX(0%)'
      preRef.backgroundColor = preRef.transform === 'translateX(0%)' ? '#edd4dc' : '#c9e0ed'
      // eslint-disable-next-line eqeqeq
      if (preRef.transform == 'translateX(100%)') {
        const constraints = {
          video: { width: 500, height: 500 },
          audio: true
        }
        // 获得video摄像头区域
        const video = document.getElementById('video2')
        // 这里介绍新的方法，返回一个 Promise对象
        // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的方法
        // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
        // 避免数据没有获取到
        const promise = navigator.mediaDevices.getUserMedia(constraints)
        promise.then(function(MediaStream) {
          video.srcObject = MediaStream
          video.play()
        })
      }
    },
    chooseFileChangeComp() {
      const video = document.getElementById('video2')
      const canvas = document.getElementById('canvas2')
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, 500, 500)
      const base64File = canvas.toDataURL()
      const formData = new FormData()
      formData.append('groupId', '101')
      formData.append('file', base64File)

      const url = 'http://localhost:9081/faceLogin'
      this.axios.post(url, formData).then(response => {
        const responseBody = response.data
        // eslint-disable-next-line eqeqeq
        if (responseBody.state == 20000) {
          this.$message.success('匹配成功')

          const name = responseBody.data.name
          const similar = responseBody.data.similarValue
          const age = responseBody.data.age
          const gender = responseBody.data.gender

          console.log('姓名：' + name + '\n相似度：' + similar + '%' + '\n年龄：' + age + '\n性别：' + gender)

          window.location.href = '/admin'
        } else {
          this.$message.error(responseBody.message)
        }
      }).catch(response => {

      })
    }
  }
}

</script>

<style scoped>
* {
  /* 去除浏览器默认内外边距 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 去除input的轮廓 */
input {
  outline: none;
}

.bigBox {
  height: 100vh;
  /* 溢出隐藏 */
  overflow-x: hidden;
  display: flex;
  /* 渐变方向从左到右 */
  background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
}

span {
  position: absolute;
  z-index: 0;
  bottom: 0;
  border-radius: 50%;
  /* 径向渐变 */
  background: radial-gradient(circle at 72% 28%, #fff 3px, #ff7edf 8%, #5b5b5b, #aad7f9 100%);
  /* 泡泡内阴影 */
  box-shadow: inset 0 0 6px #fff,
  inset 3px 0 6px #eaf5fc,
  inset 2px -2px 10px #efcde6,
  inset 0 0 60px #f9f6de,
  0 0 20px #fff;
  /* 动画 */
  animation: myMove 4s linear infinite;
}

@keyframes myMove {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }

  50% {
    transform: translate(10%, -1000%);
  }

  75% {
    transform: translate(-20%, -1200%);
  }

  99% {
    opacity: .9;
  }

  100% {
    transform: translateY(-1800%) scale(1.5);
    opacity: 0;
  }
}

/* 最外层的大盒子 */
.box {
  width: 1050px;
  height: 600px;
  display: flex;
  /* 相对定位 */
  position: relative;
  z-index: 2;
  margin: auto;
  /* 设置圆角 */
  border-radius: 8px;
  /* 设置边框 */
  border: 1px solid rgba(255, 255, 255, .6);
  /* 设置盒子阴影 */
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}

/* 滑动的盒子 */
.pre-box {
  /* 宽度为大盒子的一半 */
  width: 50%;
  /* width: var(--width); */
  height: 100%;
  /* 绝对定位 */
  position: absolute;
  /* 距离大盒子左侧为0 */
  left: 0;
  /* 距离大盒子顶部为0 */
  top: 0;
  z-index: 99;
  border-radius: 4px;
  background-color: #edd4dc;
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
  /* 动画过渡，先加速再减速 */
  transition: 0.5s ease-in-out;
}

/* 滑动盒子的标题 */
.pre-box h1 {
  margin-top: 150px;
  text-align: center;
  /* 文字间距 */
  letter-spacing: 5px;
  color: white;
  /* 禁止选中 */
  user-select: none;
  /* 文字阴影 */
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

/* 滑动盒子的文字 */
.pre-box p {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 0;
  /* 禁止选中 */
  user-select: none;
  font-weight: bold;
  color: white;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

/* 图片盒子 */
.img-box {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  /* 设置为圆形 */
  border-radius: 50%;
  /* 设置用户禁止选中 */
  user-select: none;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

/*头像采集框*/
.headImg {
  position: relative;
  top: -16px;
  width: 300px;
  height: 300px;
  margin: 0 auto 40px auto;
  /* 设置为圆形 */
  border-radius: 50%;
  /* 设置用户禁止选中 */
  user-select: none;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, .1);

}

/* 图片 */
.img-box img {
  width: 100%;
  transition: 0.5s;
}

/* 登录和注册盒子 */
.login-form,
.register-form {
  flex: 1;
  height: 100%;
}

/* 标题盒子 */
.title-box {
  height: 300px;
  line-height: 500px;

}

.title-box1 {
  height: 200px;
  line-height: 206px;
}

/* 标题 */
.title-box1 h1 {
  text-align: center;
  color: white;
  /* 禁止选中 */
  user-select: none;
  letter-spacing: 5px;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);

}

/* 标题 */
.title-box h1 {
  text-align: center;
  color: white;
  /* 禁止选中 */
  user-select: none;
  letter-spacing: 5px;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);

}

/* 输入框盒子 */
.input-box {
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
}

/* 输入框 */
input {
  width: 60%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 10px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 120px;
  /* 增加磨砂质感 */
  backdrop-filter: blur(10px);
}

input:focus {
  /* 光标颜色 */
  color: #b0cfe9;

}

/* 聚焦时隐藏文字 */
input:focus::placeholder {
  opacity: 0;
}

/* 按钮盒子 */
.btn-box {
  display: flex;
  justify-content: center;
}

/* 按钮 */
button {
  width: 100px;
  height: 30px;
  margin: 0 7px;
  line-height: 30px;
  border: none;
  border-radius: 4px;
  background-color: #69b3f0;
  color: white;
}

/* 按钮悬停时 */
button:hover {
  /* 鼠标小手 */
  cursor: pointer;
  /* 透明度 */
  opacity: .8;
}

/* 按钮文字 */
.btn-box p {
  height: 30px;
  line-height: 30px;
  /* 禁止选中 */
  user-select: none;
  font-size: 14px;
  color: white;

}

.btn-box p:hover {
  cursor: pointer;
  border-bottom: 1px solid white;
}
</style>
